import { createBrowserRouter } from 'react-router-dom'
import { Suspense, lazy } from 'react'
import AuthRouter from './AuthRouter'
import Loading from '@/components/Loading/Loading'
import NotFound from '@/components/NotFound/NotFound'

const Login = lazy(() => import('@/pages/Login/Login'))
const Layout = lazy(() => import('@/pages/Layout/Layout'))
const Home = lazy(() => import('@/pages/Layout/Home/Home'))
const Article = lazy(() => import('@/pages/Layout/Article/Article'))
const Publish = lazy(() => import('@/pages/Layout/Publish/Publish'))

const router = createBrowserRouter([
  {
    path: '/login',
    element: (
      <Suspense fallback={<Loading />}>
        <Login />
      </Suspense>
    )
  },
  {
    path: '/',
    element: (
      <AuthRouter>
        <Suspense fallback={<Loading />}>
          <Layout></Layout>
        </Suspense>
      </AuthRouter>
    ),
    children: [
      { index: true, element: <Home /> },
      { path: 'article', element: <Article /> },
      { path: 'publish', element: <Publish /> }
    ]
  },
  {
    path: '*',
    element: <NotFound />
  }
])

export default router
